<template>
	<view>
		<!-- 投稿悬浮窗 S-->
		<view class="nanbar-box" @click="opengj" v-if="detail.statusDesc != '已完成'">
			<image src="../static/icon/tougao.png" mode=""></image>
		</view>
		<!-- 悬浮窗 E-->
		<!-- 投稿弹窗 S-->
		<uni-popup ref="gjfb" type="dialog">
			<view class="gjbox">
				<view class="flex flex_start" style="padding-top: 60rpx;">
					<view class="column_align tp-fz30">
						<image style="margin: 0 148rpx 22rpx 146rpx;" class="tp-img88" src="../static/icon/fbgj.png" mode="" @click="fabu"></image>
					<text>发布稿件</text>
					</view>
					<view class="column_align tp-fz30" @click="zaixian">
						<image style="margin-bottom: 22rpx;" class="tp-img88" src="../static/icon/scgj.png" mode=""></image>
						<text>在线投稿</text>
					</view>
					
				</view>
				<view class="center_combo " style="margin-top: 60rpx;">
					<image class="tp-img36" src="../static/icon/closegj.png" mode="" @click="closegj"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 投稿弹窗 E-->
		<view class="hd-top">
			<!-- banner -->
			<image class="hdimg" :src="wwwImgUrl + detail.activityCover" mode="aspectFill"></image>
			<view class="hd-biaoti">
				<text class="tp-fz28 tp-fc333 ellispsis2">{{detail.activityTitle}}</text>
			</view>
			<!-- 活动结束 -->
			<view class="flex flex_between tp-ptb0lr30 tp-mt20">
				<view class="" v-if="detail.status==1">
					<text class="tp-fz26 tp-mr10">活动时间</text>
					<text class="tp-fz26 tp-red">{{detail.startTime}} 至 {{detail.finishTime}}</text>
				</view>
				
				<text v-else class="tp-fz26 tp-red">活动结束</text>
				<view class="align_center flex">
					<image class="tp-img28 tp-mr10 " src="../static/icon/see.png" mode=""></image>
					<text class="tp-fz22 tp-fc999">{{detail.readnum}}</text>
				</view>
			</view>
			<!-- 活动征文 -->
			<view class="tp-pt40 tp-ptb0lr30" style="width: 100%;box-sizing: border-box;">
				<!-- 活动征文 -->
				<view class="align_center flex ">
					<image class="tp-img28 tp-mr10" src="../static/icon/require.png" mode=""></image>
					<text class="tp-fz28 tp-fc333">活动征文</text>
				</view>
				<view class="tp-pt20 ">
					<view class="tp-mb20">
						<jyf-parser :html="detail.activityDesc" ref="article"></jyf-parser>
					</view>
					
					<!-- <view v-if="!qhtext">
						{{showtext}}
					</view>
					<view v-if="qhtext">
						{{hdtext}}
					</view>
					<text class="showall" style="color: #00B4FF;"  v-if="!qhtext" @click="qiehuan">全部</text>
					<view class="tp-pb20" v-if="qhtext">
						<text style="color: #00B4FF;"  @click="qiehuan">收起</text>
					</view> -->
				</view>
				<!-- 稿件征集 -->
				<view class="align_center flex">
					<image class="tp-img28 tp-mr10" src="../static/icon/require.png" mode=""></image>
					<text class="tp-fz28 tp-fc333">稿件要求</text>
				</view>
				<view class="tp-pt20 " >
					<view class="tp-pb30">
					<jyf-parser :html="detail.activityRequire" ref="article"></jyf-parser>
					</view>
					<!-- <view class="tp-fz24 " v-if="!qhtext">
						{{showtext}}
					</view>
					<view class="tp-fz24 " v-if="qhtext">
						{{hdtext}}
					</view>
					<text class="showall" style="color: #00B4FF;"  v-if="!qhtext" @click="qiehuan">全部</text>
					<view class="tp-pb20" v-if="qhtext">
						<text style="color: #00B4FF;"  @click="qiehuan">收起</text>
					</view> -->
					
				</view>
			</view>
			
		</view>
		<!-- 奖励说明 -->
		<view class="level_align tp-bdbm tp-h98 tp-bgf tp-ptb0lr30 " @click="openp">
			<image class="tp-img40 tp-mr15" src="../static/icon/reward.png" mode=""></image>
			<text class="tp-fz28 tp-mr30 ">奖励说明</text>
			<view class="level_align flex-1 flex_end">
				<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 活动投稿1 -->
		<view class="hd-bottom" >
			<view class="common_tit-wrap tp-w690">
				<view class="tp-fz28 tp-pt30">活动投稿 <text v-if="allnum!=''">({{allnum}})</text> </view>
				<view class="r-wrap tp-pt30" @click="pageJumps('strategyHdtg?id=' + id)">
					<text>查看更多</text>
					<uni-icons type="arrowright" size="20" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="gaojian  tp-w690" v-if="gjlist1!=''" @click="pageJumps('/pagesSecond/strategy/strategyHdgjdetail?id=' + gjlist1.id)">
				<view class="tp-ptb0lr20 flex flex_between tp-pt20">
					<view class="tp-fz26 ellispsis1 tp-lh40">{{gjlist1.articleName}}</view>
					<image class="tp-img44" src="../static/icon/Gold.png" mode=""></image>
				</view>
				<view class="tp-ptb0lr20 flex flex_between " style="padding-top: 10rpx;">
					<view class="flex align_center">
						<image class="tp-img36 tp-mr10" style="border-radius: 50%;" :src="gjlist1.customerAvater" mode=""></image>
						<text class="tp-fz22 ellispsis1 tp-lh40">{{gjlist1.customerName}}</text>
					</view>
					<view class="flex align_center">
						<text class="tp-fz22 ellispsis1 tp-lh40 tp-mr10">得票数</text>
						<text class="tp-mr10" style="color:#00B4FF">{{gjlist1.voteNum}}</text>
						<uni-icons type="arrowright" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="tp-ptb0lr20 tp-fz22 tp-fc999 " style="padding-top: 10rpx;">
					<text class="tp-mr10">{{gjlist1.createTime}}</text>
				</view>
			</view>
			<view class="gaojian  tp-w690" v-if="gjlist2.length!=''" @click="pageJumps('/pagesSecond/strategy/strategyHdgjdetail?id=' + gjlist2.id)">
				<view class="tp-ptb0lr20 flex flex_between tp-pt20">
					<view class="tp-fz26 ellispsis1 tp-lh40">{{gjlist2.articleName}}</view>
					<image class="tp-img44" src="../static/icon/silver.png" mode=""></image>
				</view>
				<view class="tp-ptb0lr20 flex flex_between " style="padding-top: 10rpx;">
					<view class="flex align_center">
						<image class="tp-img36 tp-mr10" style="border-radius: 50%;" :src="gjlist2.customerAvater" mode=""></image>
						<text class="tp-fz22 ellispsis1 tp-lh40">{{gjlist2.customerName}}</text>
					</view>
					<view class="flex align_center">
						<text class="tp-fz22 ellispsis1 tp-lh40 tp-mr10">得票数</text>
						<text class="tp-mr10" style="color:#00B4FF">{{gjlist2.voteNum}}</text>
						<uni-icons type="arrowright" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="tp-ptb0lr20 tp-fz22 tp-fc999 " style="padding-top: 10rpx;">
					<text class="tp-mr10">{{gjlist2.createTime}}</text>
				</view>
			</view>
			<view class="gaojian  tp-w690" v-if="gjlist3!=''" @click="pageJumps('/pagesSecond/strategy/strategyHdgjdetail?id=' + gjlist3.id)">
				<view class="tp-ptb0lr20 flex flex_between tp-pt20">
					<view class="tp-fz26 ellispsis1 tp-lh40">{{gjlist3.articleName}}</view>
					<image class="tp-img44" src="../static/icon/bronze.png" mode=""></image>
				</view>
				<view class="tp-ptb0lr20 flex flex_between " style="padding-top: 10rpx;">
					<view class="flex align_center">
						<image class="tp-img36 tp-mr10" style="border-radius: 50%;" :src="gjlist3.customerAvater" mode=""></image>
						<text class="tp-fz22 ellispsis1 tp-lh40">{{gjlist3.customerName}}</text>
					</view>
					<view class="flex align_center">
						<text class="tp-fz22 ellispsis1 tp-lh40 tp-mr10">得票数</text>
						<text class="tp-mr10" style="color:#00B4FF">{{gjlist3.voteNum}}</text>
						<uni-icons type="arrowright" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="tp-ptb0lr20 tp-fz22 tp-fc999 " style="padding-top: 10rpx;">
					<text class="tp-mr10">{{gjlist3.createTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				id:'',//页面接收id
				detail:'',//页面数据
				gjlist:[],//稿件列表
				gjlist1:'',//稿件列表
				gjlist2:'',//稿件列表
				gjlist3:'',//稿件列表
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 3, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				showLoadMore: false, // 加载更多
				loadMoreText: "加载中...",
				allnum:'',//列表数
			};
		},
		onLoad(opt) {
			this.id = opt.id
			console.log(opt)
			/* var stext = this.hdtext.substring(0,58);//截取58个字符显示,文字隐藏效果,暂时弃用
			this.showtext = stext + "..."   */
		},
		onShow() {
			this.getDetail()
			this.gaojianlist()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetail()
			this.gaojianlist()
		},
		methods: {
			//获取详情数据
			getDetail(){
				this.$http.get(this.$api.activityIndexById + '?activityId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if(res.code ==200){
						this.detail = res.data
					}
				})
			},
			//打开稿件上传弹窗
			opengj(){ 
				if(this.detail.detailStatus==0 && this.detail.isPublish==0){
					 return uni.showToast({
						title: '稿件审核中',
						duration: 2000
					});	
				}
				if(this.detail.detailStatus==2){
					 return uni.showToast({
						title: '稿件审核失败',
						duration: 2000
					});	
				}
				if(this.detail.detailStatus==1 && this.detail.isPublish==0){
					return uni.showToast({
						title: '已参加过投稿',
						duration: 2000
					});
				}
				this.$refs.gjfb.open()
			},
			//close稿件上传弹窗
			closegj() {
				this.$refs.gjfb.close()
			},
			//选择后关闭弹窗
			fabu(){
				uni.navigateTo({
					url: '/pagesSecond/strategy/onlineCranium?id=' + this.id
				})
				this.closegj()
			},
			//选择后关闭弹窗
			zaixian(){
				uni.navigateTo({
					url: '/pagesSecond/strategy/strategyRelease?id=' + this.id
				})
				this.closegj()
			},
			//奖励说明
			openp(){
				uni.navigateTo({
					url: '/pagesSecond/scenic/scenicTxt?content=' + encodeURIComponent(JSON.stringify(this.detail.rewardDesc)) + '&name=奖励说明'
				})
			},
			//稿件的列表
			gaojianlist(){
				this.$http.get(this.$api.activityDetailPaging + '?activityId=' + this.id + '&pageNum=' + this.pageNum + '&pageSize=' +
					this.pageSize).then(res => {
						uni.stopPullDownRefresh();
					if(res.code == 200){
						res.data.result.map(item => {
							if(!item.customerAvater.startsWith('http')){
								item.customerAvater = this.$imgUrl + item.customerAvater
							}
						})
						this.allnum = res.data.total
						this.gjlist = res.data.result
						if(this.gjlist.length==1){
							this.gjlist1 = this.gjlist[0]
						}
						if(this.gjlist.length==2){
							this.gjlist1 = this.gjlist[0]
							this.gjlist2 = this.gjlist[1]
						}
						if(this.gjlist.length==3){
							this.gjlist1 = this.gjlist[0]
							this.gjlist2 = this.gjlist[1]
							this.gjlist3 = this.gjlist[2]
						}
						
						console.log(this.gjlist3,'这是第一个' )
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.nanbar-box {
		position: fixed;
		top: 70%;
		right: 0;
		width: 100rpx;
		height: 100rpx;
		background: #000000;
		opacity: 0.5;
		border-radius: 50%;
		z-index: 10;
	}
	// 顶部样式
	.hd-top {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 2rpx;
		.hdimg {
			margin: 30rpx;
			width: 690rpx;
			height: 430rpx;
			border-radius: 4rpx;

		}

		.hd-biaoti {
			margin: 0 30rpx 0 30rpx;
		}
	}
	// 全部展开的定位
.showall{
	position: relative;
	top: -30rpx;
	left: 620rpx;
}
// 底部
.hd-bottom{
	padding-bottom: 20rpx;
	margin-top: 20rpx;
	width: 100%;
	background: #FFFFFF;
}
.common_tit-wrap {
		padding: 20rpx 0 20rpx 0;
		
	}
	.gaojian{
		height: 178rpx;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 8rpx;
		margin-top: 30rpx;
	}
//新增gj选择弹窗
.gjbox{
	width: 600rpx;
	height: 356rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
}
</style>
